// pages/imgClip/imgClip.js
Component({

  properties: {
    url:String
  },
  data: {
    // url:'/images/img3.png',
    resulturl:null,
    position:{
      top:0,
      left:0,
      length:0,
      width:null,
      height:null,
    },
    start:{
      pageX:null,
      pageY:null,
    },
    box:{
      pageX:null,
      pageY:null,
    },
    img:{
      width:null,
      height:null,
    },
    per:1
  },
  methods: {
    // 图片加载完成
    imageLoad(ev) {
      let height = ev.detail.height,
      width = ev.detail.width,
      query=wx.createSelectorQuery().in(this);
      query.select('.mainImg').boundingClientRect( (rect) => {
        // console.log(rect,ev)
        let win=rect.width;
        this.setData({
          'position.width':win,
          'position.height':height*win/width,
          'position.length':height>width?win:(height*win/width),
          'position.top':height>width?((height*win/width)-win)/2:0,
          'position.left':height>width?0:(win-(height*win/width))/2,
          'img.width':ev.detail.width,
          'img.height':ev.detail.height,
          'per':((ev.detail.width>ev.detail.height?ev.detail.height:ev.detail.width)/(height>width?win:(height*win/width)))/2
        })
        setTimeout(()=>{this.getImg();},0);
      }).exec();
    },
    // 改变大小
    startMove(e){
      // console.log(e)
      this.setData({
        'start.pageX':e.touches[0].pageX,
        'start.pageY':e.touches[0].pageY,
      })
    },
    move(e){
      // console.log(e)
      let index=e.currentTarget.dataset.index,
        pageX=e.touches[0].pageX,
        pageY=e.touches[0].pageY,
        startX=this.data.start.pageX,
        startY=this.data.start.pageY;
      if(startX===null||startY===null){
        return;
      }
      // 获取移动距离
      let moveX,moveY;
      switch(index){
        case 1:
          moveX=startX-pageX;
          moveY=startY-pageY;
          break;
        case 2:
          moveX=pageX-startX;
          moveY=startY-pageY;
          break;
        case 3:
          moveX=pageX-startX;
          moveY=pageY-startY;
          break;
        case 4:
          moveX=startX-pageX;
          moveY=pageY-startY;
          break;
      }
      let move=Math.abs(moveX)>Math.abs(moveY)?moveX:moveY;
      let length=this.data.position.length,
        top=this.data.position.top,
        left=this.data.position.left,
        height=this.data.position.height,
        width=this.data.position.width;
      let bottom=height-(top+length),
        right=width-(left+length);
      // 计算新length top left
      let newlength=length+move;
      newlength<50?newlength=50:null;
      // console.log(newlength,move)
      switch(index){
        case 1:
          top=height-bottom-newlength;
          left=width-right-newlength;
          break;
        case 2:
          top=height-bottom-newlength;
          break;
        case 3:
          break;
        case 4:
          left=width-right-newlength;
          break;
      }
      bottom=height-(top+newlength);
      right=width-(left+newlength);
      // console.log(length,top,left)
      if(top<0||left<0||bottom<0||right<0){
        return;
      }
      // 设置新length top left
      this.setData({
        'position.length':newlength,
        'position.top':top,
        'position.left':left,
        'start.pageX':pageX,
        'start.pageY':pageY,
      })
    },
    endMove(){
      this.setData({
        'touch.pageX':null,
        'touch.pageY':null,
      })
      this.getImg();
    },
    // 移动
    startMoveBox(e){
      // console.log(e)
      this.setData({
        'box.pageX':e.touches[0].pageX,
        'box.pageY':e.touches[0].pageY,
      })
    },
    moveBox(e){
      let pageX=e.touches[0].pageX,
        pageY=e.touches[0].pageY,
        startX=this.data.box.pageX,
        startY=this.data.box.pageY,
        top=this.data.position.top,
        left=this.data.position.left,
        height=this.data.position.height,
        width=this.data.position.width,
        length=this.data.position.length;
      if(startX===null||startY===null){
        return;
      }
      let moveX=pageX-startX,
        moveY=pageY-startY;
      let endX=left+moveX,
        endY=top+moveY;
      endX<0?endX=0:(endX>(width-length)?endX=(width-length):null);
      endY<0?endY=0:(endY>(height-length)?endY=(height-length):null);
      this.setData({
        'box.pageX':pageX,
        'box.pageY':pageY,
        'position.top':endY,
        'position.left':endX,
      })
    },
    endMoveBox(){
      this.setData({
        'box.pageX':null,
        'box.pageY':null,
      })
      this.getImg();
    },
    convertToGrayscale(data) {
      let g = 0
      for (let i = 0; i < data.length; i += 4) {
        g = (data[i] * 0.3 + data[i+1] * 0.59 + data[i+2] * 0.11)
        data[i] = g
        data[i+1] = g
        data[i+2] = g
      }
      return data
    },
    getImg(){
      let top=this.data.position.top,
      left=this.data.position.left,
      width=this.data.position.width,
      height=this.data.position.height,
      length=this.data.position.length,
      iwidth=this.data.img.width,
      iheight=this.data.img.height,
      per=this.data.per;
      let context = wx.createCanvasContext('resultImg',this);
      // console.log(this.data.url, 0,0, iwidth, iheight, -left, -top, width, height)
      // console.log(per)
      context.drawImage(this.data.url, 0,0, iwidth, iheight, -left*per, -top*per, width*per, height*per);
      context.stroke()
      context.draw(false,()=>{
        // console.log(context)
        setTimeout(()=>{
          wx.canvasToTempFilePath({
            canvasId: 'resultImg',
            x: 0,
            y: 0,
            width: length*per,
            height: length*per,
            destWidth: length*per,
            destHeight: length*per,
            fileType: 'jpg',
            quality: 1,
            success: (res) => {
              let base64 = wx.getFileSystemManager().readFileSync(res.tempFilePath, 'base64');
              // console.log('data:image/jpg;base64,'+base64)
              this.setData({
                resulturl:'data:image/jpg;base64,'+base64
              })
            }
          },this)
        },10)
      })
    },
  },
})